import { useState,useEffect,useRef } from 'react'
import { Badge, NavBar, Grid, Toast, Input, Image, Tabs, CapsuleTabs,Card } from 'antd-mobile'
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
import topImage from '@/assets/react.svg'
import './index.less'


function Shop() {
    const [isDisplay, setDisplay] = useState(true)
    const getWidth = () => window.innerWidth - 24
    const [windowWidth, setWindowWidth] = useState(getWidth());
    const right = (
        <div style={{ fontSize: 24 }}>
            <Badge content='5'>
                <MoreOutline />
            </Badge>
        </div>
    )

    const tabsRef:any = useRef(null)
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
        const scrollChange = (event:any) => {
            var touches = event.changedTouches[0]; // 获取当前触点信息
            var deltaY = touches.clientY - startY; // 计算手指在Y轴上的位置变化量
            startY = touches.clientY
            if (deltaY > 0) { // 若向上滑动且超过阈值（这里设定为15px）则进行相应操作
                setDisplay(true)
            } else { // 若未达到阈值则不进行任何操作
                setDisplay(false)
            }
        }
        
        var startY = 0; // 记录开始时手指所在位置的Y值
        useEffect(() => {
            // 滚动条滚动时触发
            const widthSize = () => {
                setWindowWidth(getWidth());
              };
              window.addEventListener("resize", widthSize);
            window.addEventListener('touchmove', function(event) {scrollChange(event)});
            return () => {
                window.removeEventListener('touchmove', scrollChange, false)
                window.removeEventListener("resize", widthSize);
                startY = 0
            }
        }, [])
        
    return (
        <div style={{overflow:'auto'}}>
            <NavBar right={right} onBack={back} className='topContent' style={{position:'fixed',width:windowWidth,zIndex:1}}>
                <Input className='inputBox' />
                <SearchOutline className='icon' />
            </NavBar>
            <div style={{position:'fixed',width:'100%'}}>
                <Tabs  style={{marginTop:isDisplay ? 43 : 0 ,width:'100%',transition:'all 250ms',background:'white'}}>
                    <Tabs.Tab title='全部' key='fruits' />
                    <Tabs.Tab title='天猫' key='vegetables' />
                    <Tabs.Tab title='店铺' key='animals' />
                    <Tabs.Tab title='直播' key='vegetables1' />
                    <Tabs.Tab title='上新' key='vegetables2' />
                    <Tabs.Tab title='攻略' key='vegetables453' />
                </Tabs>
                <CapsuleTabs style={{background:'white',width:'100%',transition:'all 250ms'}}>
                    <CapsuleTabs.Tab title='百亿补贴' key='fruits'/>
                    <CapsuleTabs.Tab title='品牌' key='vegetables'/>
                    <CapsuleTabs.Tab title='尺码' key='animals'/>
                </CapsuleTabs>
            </div>
            <Grid columns={2} gap={8} className='midContent' style={{marginTop:160}}>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
            <Grid columns={2} gap={8} className='midContent'>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
            <Grid columns={2} gap={8} className='midContent'>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
            <Grid columns={2} gap={8} className='midContent'>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
            <Grid columns={2} gap={8} className='midContent'>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
            <Grid columns={2} gap={8} className='midContent'>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
                <Grid.Item>
                    <Image src={topImage} />
                    <div>
                        <span className='tagStyle'>
                            天猫
                        </span>
                        <span className='description'>
                            加绒加厚ins宽松重磅银狐绒外套
                        </span>
                    </div>
                    <Grid columns={3}>
                        <Grid.Item className='money'>
                            ¥119.96
                        </Grid.Item>
                        <Grid.Item className='moneyRight' span={2}>
                            <span className='firstOrder'>
                                首单价
                            </span>
                            <span className='payNum'>
                                3000+人付款
                            </span>
                        </Grid.Item>
                    </Grid>
                </Grid.Item>
            </Grid>
        </div>
    )
}

export default Shop
